﻿<template>

    <div class="wish_container" >

        <!--<header class="wish_header" ref="wish_header">-->
          <!--<img src="../../static/img/back_ccc.png" class="back_c"/>-->
          <!--<span class="wish_header_n">-->
            <!--添加愿望-->
          <!--</span>-->
          <!--<span class="al_read_send_btn" v-on:click="send_wish">-->
             <!--发送愿望-->
          <!--</span>-->
        <!--</header>-->
      <header_nav :header_name="header_n" :go_back_flag="true"></header_nav>

       <!--<div style="height:11.7vw" ref="bg_all_w_d"></div>-->

       <!-- 添加愿望标题 s -->
      <div class="input_wish_header_title" ref="input_wish_header_title">
        <div class="input_wish_header">
          <input class="input_wish_header_header" placeholder="+添加愿望标题" style="display:block;width:100%;border:0;" ref="title"/>

          <div class="input_wish_header_middle_img" v-on:click="get_img_this_page">
            <!--show_b_img_data-->
            <img v-bind:src="show_b_img_data" class="input_wish_input_img" ref="imgdata">
          </div>
          <div class="input_wish_header_bottom">
            <div class="input_wish_header_b_btn input_wish_header_b_btn_1">
              取消
            </div>
            <div class="input_wish_header_b_btn input_wish_header_b_btn_2">
              确认
            </div>
          </div>
        </div>

        <div class="input_wish_title">
          愿望简介
        </div>
        <div class="input_wish_header">
          <!-- 富文本s -->
          <div class="">
            <vue-editor id="editor"
                        useCustomImageHandler
                        v-model="htmlForEditor">
            </vue-editor>
          </div>
          <!-- 富文本e -->

          <div class="input_wish_header_bottom">
            <div class="input_wish_header_b_btn input_wish_header_b_btn_1">
              取消
            </div>
            <div class="input_wish_header_b_btn input_wish_header_b_btn_2">
              确认
            </div>
          </div>
        </div>

        <div class="input_wish_title">
          愿望详情
        </div>
        <div class="input_wish_header">
          <!-- 富文本s -->
          <div class="">
            <vue-editor id="editor"
                        useCustomImageHandler
                        v-model="htmlForEditor_detail">
            </vue-editor>
          </div>
          <!-- 富文本e -->

          <div class="input_wish_header_bottom">
            <div class="input_wish_header_b_btn input_wish_header_b_btn_1">
              取消
            </div>
            <div class="input_wish_header_b_btn input_wish_header_b_btn_2">
              确认
            </div>
          </div>
        </div>

        <div class="input_wish_header">
          <div class="input_wish_header_header">
            方案一
          </div>
          <div class="input_wish_header_n clearfix">
            <div class="input_wish_header_left clearfix">
              <img src="../../static/img/bg_all.png" class="image_n">
              <p class="input_wish_header_left_id">
                 12345678
              </p>
              <p class="input_wish_header_left_name">
                啊啊啊
              </p>
            </div>

            <div class="input_wish_header_right">
              <div class="input_wish_header_title_inner">
                <span style="margin-left:3vw;">方案描述</span>
              </div>
              <textarea class="input_wish_main" ref="input_wish_main">

              </textarea>
            </div>

          </div>

          <div class="wish_need">
            <div class="wish_need_header">
                <span style="margin-left:3vw;">方案所需</span>
            </div>
            <div style="text-align:left;height:4vw;line-height:4vw;margin-top:2vw;">
              <span style="color:#6d6d6d;font-size:2.5vw;margin-left:3.2vw;">
                技能：<input type="text" name="name" value="" style="border:0;" ref="skill"/>
              </span>
            </div>
            <div style="text-align:left;height:4vw;line-height:4vw;margin-top:2vw;">
              <span style="color:#6d6d6d;font-size:2.5vw;margin-left:3.2vw;">
                资源：<input type="text" name="name" value="" style="border:0;" ref="res"/>
              </span>
            </div>
            <div style="text-align:left;height:4vw;line-height:4vw;margin-top:2vw;">
              <span style="color:#6d6d6d;font-size:2.5vw;margin-left:3.2vw;">
                其他：<input type="text" name="name" value="" style="border:0;" ref="other"/>
              </span>
            </div>
          </div>

          <!--<div class="input_wish_header_middle_img">
            <img src="../../static/img/input_wish_input_img.png" class="input_wish_input_img">
          </div>-->
          <!--<div class="input_wish_header_bottom">
            <div class="input_wish_header_b_btn input_wish_header_b_btn_1">
              取消
            </div>
            <div class="input_wish_header_b_btn input_wish_header_b_btn_2">
              确认
            </div>
          </div>-->

          <div class="up_load_btn">提交</div>
        </div>
      </div>
      <!-- 添加愿望标题 e -->
      <input type="file" name="name" value="" style="display:none;" ref="file_img"/>
    </div>

</template>

<script>
  import '../../static/css/FooterMenu.css';
  import {mapState, mapMutations, mapActions} from 'vuex';
  import store from '../vuex/store_index';
  import common from "../common/common.js"
  import use_rem from "../../static/js/use_rem.js"
  import { VueEditor } from 'vue2-editor'
  import { Toast, Indicator } from 'mint-ui';
  import qs from 'qs';
  import header_nav from "../common/header_other/Header_other.vue"


  use_rem();
  export default {
    name: 'FooterMenu',
    data () {
      return {
        menu_list: this.$store.getters.get_footer_menu_list,
        sign_c: true,
        show_b_img_data: "../../static/img/input_wish_input_img.png",
        htmlForEditor: "",
        htmlForEditor_detail:"",
        user_id: "",
        voice_data:"",
        record_voice:"",
        base_url:"",
        header_n:"添加愿望"

      }
    },
    computed: mapState([
      'footer_menu_list'
    ]),
    methods: {
      ...mapActions(['redirect']),
      up_load_img: function (cb) {
        ///api/user / activity / upload
        //files
        let img = this.$refs.file_img.files[0];
        let formData = new FormData();
        formData.append("files", img);

        this.$http.post('/yizhiweimen/api/user/activity/upload',
          formData,
          {
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }
        )
          .catch((thrown) => {
            Indicator.close();
            console.log(thrown);

          }).then((e) => {
            console.log(e)
            this.up_load_img = e.data.fileUrl;
            cb()
          })
      },
      send_wish: function () {
        ///api/user / activity / upload

        ///api/user/wish/addWish

        this.up_load_img(() => {
        let formData = new FormData();
        let img = this.up_load_img;

        let title = this.$refs.title.value;
        let desribe = this.htmlForEditor_detail;
        let brief = this.htmlForEditor;

        //方案
        let input_wish_main = this.$refs.input_wish_main.value;//描述
        let skill = this.$refs.skill.value;
        let res = this.$refs.res.value;
        let other = this.$refs.other.value;

        formData.append("describe", desribe);
        formData.append("intro", brief);
        formData.append("image", img);
        formData.append("title", title);
        formData.append("user.id", this.user_id);


        //方案
        formData.append("wishSchemes.describe", input_wish_main)
        formData.append("wishSchemes.skill", skill)
        formData.append("wishSchemes.resource",res)
        formData.append("wishSchemes.other", other)

        Indicator.open();
        this.$http.post('/yizhiweimen/api/user/wish/addWish',

          JSON.stringify({
              "describe": desribe,
              "intro": brief,
              "image": img,
              "title": title,
              "user.id": this.user_id,
              //"wishSchemes.describe": input_wish_main,
              //"wishSchemes.skill": skill,
              //"wishSchemes.resource": res,
              //"wishSchemes.other": other
          })
        , {
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            }
          }
          )
          .catch((thrown) => {
            Indicator.close();
            console.log(thrown);

          }).then((e) => {
            Indicator.close();
            console.log(e);

            if (e == "") {
              Toast({
                message: '发送成功',
                position: 'bottom',
                duration: 2000
              });
            }


          })
        });

      },
      jump: function (name) {
        let id = name.replace("./", "");
        //common.jump({
        //  url: name,
        //  id: id
        //});
        //关闭所有 webview
        let all = plus.webview.all();
        //current webview
        var curr = plus.webview.currentWebview();
        for (let i = 0, len = all.length; i < len; i++) {
          //关闭除setting页面外的其他页面
          if (all[i].getURL() == curr.getURL())
            continue;
            plus.webview.close(all[i]);
        }
        //mui.openWindow({
        //  url:name,
        //  id: id,
        //  createNew: false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
        //  show: {
        //    autoShow: true,//页面loaded事件发生后自动显示，默认为true
        //    aniShow: "zoom-fade-in",//页面显示动画，默认为”slide-in-right“；
        //  },
        //  waiting: {
        //    autoShow: true,//自动显示等待框，默认为true
        //    title: '正在加载...',//等待对话框上显示的提示内容
        //  }
        //})
      },
      get_img_this_page: function () {
        this.$refs.file_img.click();
      }
    },
    mounted: function () {
      common.is_app(this);
      //    this.$store.getters.Get_Bot_C_obj
      //let wish_header = window.getComputedStyle(this.$refs.wish_header, "height").height.replace("px", "");
      //let main_h = document.body.clientHeight;
      //this.$refs.input_wish_header_title.style.height = main_h - parseInt(wish_header) + "px";
      //图片
      this.$refs.file_img.addEventListener("change",  (e)=> {

        let count = 0;
        let result = e.srcElement.files;

        //限制张数
        if (e.srcElement.files.length > 1) {
          Toast({
            message: '图像张数不能多于1张',
            position: 'bottom',
            duration: 2000
          });
          return;
        }

        let reader = new FileReader(); //读取图片
        reader.readAsDataURL(result[0]); //get img url

        let _this = this;
        //可以获取啦呵呵

        reader.onload = (e) => {
          this.show_b_img_data = e.target.result;
        }
      })
        /// api / user / getUserByIdent

      //获取用户消息
      //ident
      let user_id = location.search.split("user_id=")[1];
      this.user_id = user_id;
      this.$http.post(this.base_url+'/yizhiweimen/api/user/getUserByIdent',
        qs.stringify(
          {
            'ident': user_id,
          })
        )
        .catch((thrown) => {

          console.log(thrown);
        }).then((e) => {
          console.log()
        })

    },
    components: {
      VueEditor,
      header_nav
    }
  }
</script>
<!--inner style for thom template-->
<style>
  html.body {
    background-color: #eeeeee;
  }
  .ql-toolbar.ql-snow + .ql-container.ql-snow {
    background-color: #fff;
  }
  .quillWrapper{
    border-radius:2vw;
  }
  .quillWrapper .ql-snow.ql-toolbar{
    border-radius:2vw 2vw 0 0 ;
  }
  .ql-editor{
    border-bottom:0;
  }
  .up_load_btn{
    width: 20vw;
    height: 8vw;
    line-height: 8vw;
    background-color: #3b9e4c;
    color:#fff;
    font-size: 3.5vw;
    text-align: center;
    margin:  0 auto;
  }
</style>
<style scoped>

/*input wish title s*/

  .input_wish_title {
    height:6vw;
    line-height:6vw;
    font-size:6vw;
    text-align:center;
    margin-bottom:2vw;
    margin-top:6vw;
    color:#000000;
  }


/*input wish title e*/
/*愿望s*/
  .wish_need_header {
    height: 6vw;
    line-height: 6vw;
    background-color: #dcdcdc;
    color: #6a6a6a;
    font-size: 3vw;
    border-radius: 2vw 2vw 0 0;
    text-align: left;
    color: #6c6c6c;
    font-weight:bold;
  }
  .wish_need {
    width: 82vw;
    height: 26.6vw;
    margin: 2vw auto;
    border-radius: 2vw;
    background-color: #eeeeee;
  }
  .input_wish_main {
    width: 70.2vw;
    /*height: 60vw;*/
    background-color: #eeeeee;
    border-radius: 0 0 2vw 2vw;
    height:29vw;
    resize:none;
    padding:0;
    margin:0;
    border:0;
  }

  .input_wish_header_title_inner {
    line-height: 6vw;
    height: 6vw;
    width: 100%;
    font-size: 3.5vw;
    color: #727272;
    border-radius:2vw 2vw 0 0;
    background-color: #dcdcdc;
    text-align:left;
    font-weight:bold;
  }
  .input_wish_header_n {
    margin-top: 3vw;
    padding-bottom: 3vw;
    border-bottom: 2px solid #f5f5f5;
  }
  .input_wish_header_right {
    width: 70.2vw;
    height: 35vw;
    border-radius: 2vw;
    background-color: #eeeeee;
    float: left;
    margin-left: 2.6vw;
  }
  .input_wish_header_left {
    float: left;
    margin-left: 2.6vw;
  }
  .input_wish_header_left_id {
    text-align: center;
    color: #787878;
    font-size: 2.5vw;
    line-height: 1.2;
  }
  .input_wish_header_left_name {
    color: #787878;
    font-size: 2.5vw;
    line-height:1.2;
  }
  .image_n {
    width: 12vw;
    height: 12vw;
    border-radius: 1vw;
    font-size: 2.5vw;
  }
  .input_wish_header_b_btn {
    width: 16.5vw;
    line-height: 6.4vw;
    height: 6.4vw;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    border-radius: 2vw;
    font-size: 3.5vw;
  }
  .input_wish_header_b_btn_1 {
    right: 22vw;
    transform: translateY(-50%);
    background-color: #959595;
  }
  .input_wish_header_b_btn_2 {
    right: 3.4vw;
    transform: translateY(-50%);
    background-color: #80c26a;
  }
  .input_wish_header_bottom {
    height: 9.7vw;
    line-height: 9.7vw;
    border-radius: 0 0 2vw 2vw;
    position:relative;
  }
  .input_wish_input_img {
    width: 16.9vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .wish_header {
  }
  .input_wish_header_middle_img {
    height: 41.8vw;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #eaeaea;
  }
  ::-webkit-input-placeholder {
    color:#fff;
  }
  /* 使用webkit内核的浏览器 */
  :-moz-placeholder {
    color: #fff;
  }
  /* Firefox版本4-18 */
  ::-moz-placeholder {
    color: #fff;
  }
  /* Firefox版本19+ */
  :-ms-input-placeholder {
    color: #fff;
  }
  /* IE浏览器 */
  .input_wish_header_header {
    border-bottom: 1px solid #eaeaea;
    height: 8.4vw;
    line-height: 8.4vw;
    text-align: center;
    color: #fff;
    font-size: 4vw;
    border-radius: 2vw 2vw 0 0;
    background-color: #9f5c2f;
  }
  .wish_container {
    height: auto;
    background-color: #eeeeee;
  }
  /*input_wish_header s*/
  .input_wish_header {
    width: 94vw;
    border-radius: 2vw;
    margin: 2.6vw auto;
    background-color: #fff;
    border-radius: 2vw;
    margin-bottom:0;
    padding-bottom:2vw;
  }
  /*input_wish_header e*/
  /*al_read_send_btn s*/
  .al_read_send_btn {
    width: 21.6vw;
    height: 7.3vw;
    line-height: 7.3vw;
    text-align: center;
    border-radius: 2vw;
    color: #fff;
    background-color: #d84848;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 4vw;
    transform: translateY(-50%);
  }
  /*愿望e*/
  /*al_read_send_btn e*/
  /*wish_mid*/
  .wish_main {
    overflow-y: scroll;
    background-color: #eeeeee;
  }
  .wish_mid_wish .wish_mid_act_btn {
    color: #9f5c2f
  }
  .wish_mid_wish {
    height: 8.8vw;
    line-height: 8.8vw;
    color: #b5b5b5;
    font-size:3vw;
    text-align:center;
    display:flex;
    justify-content:space-around;
  }
  .wish_header_title {
    text-align: right;
  }
  .wish_header_w {
    text-indent: 6vw;
  }
  .wish_mid_right {
    line-height:1.2;
    font-size: 3.5vw;
    text-align:left;
    color: #9f5c2f;
    width: 66vw;
    height: 13.2vw;
    background-color: #fff;
    border-radius: 2vw;
    margin-top:2.1vw;
    padding:3vw;
  }
  .wish_seed {
    width: 16.6vw;
    display: block;
    padding-left: 4.8vw;
    padding-top: 3.4vw;
    height:15.3vw;
    margin-right:3.2vw;
  }
  .wish_mid {
    display:flex;
    height: 23.2vw;
    background-color: #eeeeee;
  }
  /*wish_mid*/
  .add_wish {
    width: 18vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #fff;
    font-size: 3.5vw;
    border-radius: 2vw;
    background-color: #d84848;
    margin-left: 2.5vw;
    display: inline-block;
    text-align: center;
  }
  .input_search {
    width: 42vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #9f5c2f;
    border-radius: 2vw;
    margin-left: 18vw;
    border: 0;
  }
  .wish_header {
    height: 11.7vw;
    line-height: 11.7vw;
    color: #fff;
    font-size: 4vw;
    background-color: #9f5c2f;
    position: fixed;
    width:100%;
    top:0;
    left:0;
    text-align: center;
    z-index:100;
  }

  .wish_header_n {
    font-size: 4.5vw;
    color: #fff;
  }

  .back_c{
    height:6vw;
    width:5vw;
    position:absolute;
    top:50%;
    left:1.3vw;
    transform:translateY(-50%);
  }
</style>

